<!--
 * @Description: 
 * @Autor: Bingo
 * @Date: 2023-06-14 16:47:58
 * @LastEditors: Bingo
 * @LastEditTime: 2023-06-16 14:30:11
-->
<template>
	<a-modal :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel" width="40%">
		<template #title="text">
			<a-popover placement="bottom">
				<template slot="content">
					<p>1.自定义列表格式后，点击保存并成功命名后即可将自定义格式永久保存。</p>
					<p>2.点击查看更多可查看所有的列表格式，并对列表格式设置进行操作。</p>
					<p>3.确认按钮不会储存格式;使用默认也不会切换格式，需点击使用按钮方可切换。</p>
					<p>4.初始格式为表格的本地格式，不可删除；若没有储存其他格式或者设置其他默认格式，则默认使用初始格式。</p>
				</template>
				<template slot="title">
					<span>注意事项:</span>
				</template>
				更多格式
				<a-icon type="question-circle" />
			</a-popover>
		</template>
		<a-table :columns="columns" :data-source="tableData" :border="false" :row-key="(record) => record.id">
			<template slot="isDefault" slot-scope="text, record, index">{{ text ? '是' : '否' }}</template>
			<template slot="action" slot-scope="text, record, index">
				<a-button type="link" :disabled="record.isDefault" @click="handleSetUse(record)">使用</a-button>
				<!-- <a-button type="link">设为默认</a-button> -->
				<a-popconfirm
					title="确定要删除吗?"
					ok-text="删除"
					cancel-text="取消"
					@confirm="confirmDelete(record)"
					@cancel="() => {}"
					v-if="!record.isDefault">
					<a-button type="link">删除</a-button>
				</a-popconfirm>
				<a-button type="link" @click="handleLook(record)">查看</a-button>
			</template>
		</a-table>
		<ShowSelectColMd ref="ShowSelectColMd"></ShowSelectColMd>
	</a-modal>
	
</template>
<script>
import { setUse, deleteById } from '@/api/tableSet';
import ShowSelectColMd from './showSelectColMd'
export default {
	name: 'MoreListMd',
	components: {ShowSelectColMd},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	data() {
		return {
			tableData: [],
			columns: [
				{
					dataIndex: 'title',
					title: '格式名称'
				},
				{
					dataIndex: 'isDefault',
					title: '是否使用',
					scopedSlots: { customRender: 'isDefault' },
					width: 100
				},
				{
					dataIndex: 'action',
					title: '操作',
					width: 300,
					scopedSlots: { customRender: 'action' }
				}
			],
			visible: false,
			confirmLoading: false
		};
	},
	methods: {
		show(tableData) {
			this.tableData = tableData;
			this.visible = true;
		},
		close() {
			this.tableData = [];
			this.visible = false;
		},
		handleOk() {
			this.visible = false;
		},
		handleCancel() {
			this.visible = false;
		},
		confirmDelete(record) {
			deleteById(record.id)
				.then((res) => {
					this.tableData = this.tableData.filter((item) => item.id != record.id);
					this.$message.success('删除成功');
				})
				.catch(() => {
					this.$message.success('删除失败');
				});
		},
		handleSetUse(record) {
			setUse({
				id: record.id,
				code: this.code
			})
				.then((res) => {
					this.tableData.forEach((item) => {
						if (item.id == record.id) {
							item.isDefault = true;
						} else {
							item.isDefault = false;
						}
					});
					this.$message.success('设置成功');
					this.$emit('setUseCol', record);
				})
				.catch(() => {
					this.$message.success('设置失败');
				});
		},
		// 查看
		handleLook(record){
			this.$refs.ShowSelectColMd.show(record)
		}
	}
};
</script>
<style scoped lang="less"></style>
